<template>
    <div class="material-store-preview" v-if="props.visible" @click.stop>
        <img
            class="icon-close"
            :src="`${_oss_}images/material-store/icon-close.png`"
            @click="onClose()"
        />
        <div class="swiper-box">
            <Swiper
                @swiper="(ref) => (swiperRef = ref)"
                :modules="[Autoplay, Pagination]"
            >
                <SwiperSlide>
                    <img class="img" :src="props.data.preview_files" />
                </SwiperSlide>
            </Swiper>

            <!-- <img
                class="button-prev"
                @click="onPrev"
                :src="`${_oss_}images/material-store/arrow-left-btn.png`"
            />

            <img
                class="button-next"
                @click="onNext"
                :src="`${_oss_}images/material-store/arrow-right-btn.png`"
            /> -->
        </div>

        <div class="info-box">
            <div class="top">
                <div class="title">{{ props.data.name }}</div>

                <div class="price">积分兑换：{{ props.data.integral }}</div>

                <div class="buy-btn">
                    <img :src="`${_oss_}images/material-store/icon-cart.png`" />
                    购买/兑换
                </div>

                <img
                    class="cart-btn"
                    :src="`${_oss_}images/material-store/icon-cart-2.png`"
                />
                <img
                    class="star-btn"
                    :src="`${_oss_}images/material-store/icon-star-2.png`"
                />
            </div>

            <div class="bottom">
                <div class="publisher">发布人：华锐云空间</div>

                <div class="copyright">
                    版权说明
                    <img
                        class="icon-question-mark"
                        :src="`${_oss_}images/material-store/icon-question-mark.png`"
                    />
                </div>

                <div class="disclaimer">
                    免责说明
                    <img
                        class="icon-question-mark"
                        :src="`${_oss_}images/material-store/icon-question-mark.png`"
                    />
                </div>
            </div>
        </div>
    </div>
    <div class="material-store-preview--placeholder" v-if="props.visible"></div>
</template>
<script setup>
import { Autoplay, Pagination } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
import "swiper/css/pagination";

const swiperRef = ref(null);
const emits = defineEmits(["close"]);
const props = defineProps({
    visible: {
        type: Boolean,
        default: false,
    },
    data: {
        type: Object,
        default: () => ({}),
    },
});

const onPrev = () => {
    swiperRef.value.slidePrev();
};

const onNext = () => {
    swiperRef.value.slideNext();
};

const onClose = () => {
    emits("close");
};
</script>
<style lang="scss" scoped>
.material-store-preview {
    position: absolute;
    left: 0;
    width: 1200px;
    height: 536px;
    background: #ffffff;
    border-radius: 10px;
    padding-top: 34px;
    margin-top: 16px;
    z-index: 99;

    &--placeholder {
        height: 536px;
        margin-top: 16px;
    }

    .icon-close {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 28px;
        height: 28px;
        cursor: pointer;
    }

    .swiper-box {
        position: relative;
        width: 954px;
        height: 408px;
        margin: 0 auto;

        .swiper {
            width: 100%;
            height: 100%;
        }

        .img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .button-prev,
        .button-next {
            position: absolute;
            top: 50%;
            width: 50px;
            height: 50px;
            cursor: pointer;
            transform: translateY(-50%);
        }

        .button-prev {
            left: -85px;
        }

        .button-next {
            right: -85px;
        }
    }

    .info-box {
        width: 954px;
        margin: 0 auto;

        .top {
            display: flex;
            align-items: center;
            height: 30px;
            margin-top: 18px;

            .title {
                font-size: 18px;
                color: #333;
                line-height: 1em;
            }

            .price {
                font-size: 14px;
                color: #5085fb;
                margin-left: 42px;
            }

            .buy-btn {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 110px;
                height: 30px;
                background: #5085fb;
                border-radius: 4px;
                border: 1px solid #5085fb;
                margin-left: auto;

                font-size: 14px;
                color: #ffffff;
                line-height: 30px;
                cursor: pointer;

                img {
                    width: 16px;
                    height: 16px;
                    margin-right: 10px;
                }
            }

            .cart-btn,
            .star-btn {
                width: 30px;
                height: 30px;
                cursor: pointer;
            }

            .cart-btn {
                margin-left: 31px;
            }

            .star-btn {
                margin-left: 10px;
            }
        }

        .bottom {
            display: flex;
            align-items: center;
            margin-top: 10px;

            .publisher {
                font-size: 18px;
                color: #333;
                line-height: 1em;
            }

            .copyright,
            .disclaimer {
                display: flex;
                align-items: center;
                font-size: 14px;
                color: #999;
                cursor: pointer;
            }

            .copyright {
                margin-left: auto;
            }

            .disclaimer {
                margin-left: 19px;
            }

            .icon-question-mark {
                width: 14px;
                height: 14px;
                margin-left: 6px;
            }
        }
    }
}
</style>
